<template>
    <div class="">
        <header2></header2>
        <div class="title">
            自然边整木家具
        </div>
        <div class="title2">
            Live Edge Furniture Collection
        </div>

        <vlist v-model="list"></vlist>

        <vfooter></vfooter>
    </div>
</template>

<script type="text/ecmascript-6">
    import header2 from '../common/Header.vue';
    import vfooter from '../common/Footer';
    import vlist from './List';


    export default {
        components: {
            header2,
            vfooter,
            vlist
        },
        data: function () {
            return {
                skip: -12 ,
                take:12,
                busy:false,
                over:false,
                list: []
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                if( this.over) return ;
                this.busy = true;
                this.skip += this.take;

                var paths = this.$route.path.split("/").filter(it => it);
                var path0 = paths[0].toLowerCase();
                var module = "";
                if (paths.length == 1) {
                    if (path0 == "gallery") {
                        module = "Gallery"
                    }
                    if (path0 == "blog") {
                        module = "Blog"
                    }
                } else {
                    return;
                }

                this.$http.post("/shop/article/find", {module: module,skip:this.skip,take:this.take }).then(res => {
                    var list =  res.data.data;
                    this.list.pushAll(list);
                    this.busy = false;
                    if( list.length < this.take){
                        this.over = true;
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .title {
        display: flex;
        justify-content: center;
        font-size: 5rem;
        margin-top: 60px;
    }

    .title2 {
        display: flex;
        justify-content: center;
        font-size: 2.2rem;
        text-transform: capitalize;
    }

    .type {
        display: flex;
        margin-top: 40px;
        justify-content: center;
        text-transform: uppercase;
    }

    .type a {
        display: flex;
        align-items: center; /*垂直居中*/
        justify-content: center; /*水平居中*/
        margin: 5px 15px;
        flex-direction: column;
    }

    .type a:after {
        content: "";
        width: 100%;
        height: 1px;
        display: block;
        background-color: #cccccc;
    }

    .type a .en {
        margin: 10px auto;
    }
</style>
